<template>
  <div id="app">
    <div class="nav">
      <ul>
        <li><img alt="Vue logo" src="./assets/logo.png" /></li>
        <li><router-link to="/my">导航去MyMusic</router-link></li>
        <li><router-link to="/friend">导航去Friend</router-link></li>
        <li><router-link to="/find">导航去FindMusic</router-link></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><RouterLink to="/find/top">排行榜</RouterLink></li>
      </ul>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style lang="less">
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    ul {
      display: flex;
      gap: 2px;
      list-style: none;
      li {
        width: 180px;
        height: 40px;

        img {
          width: 25px;
        }
        a {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
          color: white;
          text-decoration: none;
          background-color: #666;
          &:hover {
            background-color: rgb(192, 146, 146);
          }
          &.active {
            background-color: rgb(0, 0, 0);
          }
        }
      }
    }
  }
}
</style>
